<!doctype html>
<html lang="en-US">

<head>
  <title>Message status</title>
  <link href="/assets/index.css" rel="stylesheet" type="text/css" />
  <script type="importmap">
    {
      "imports": {
        "@fluentui/react-provider": "https://esm.sh/@fluentui/react-provider?deps=react@18&exports=FluentProvider",
        "@fluentui/tokens": "https://esm.sh/@fluentui/tokens?deps=react@18&exports=createDarkTheme,webLightTheme",
        "@testduet/wait-for": "https://unpkg.com/@testduet/wait-for@main/dist/wait-for.mjs",
        "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
        "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
        "botframework-webchat/decorator": "/__dist__/packages/bundle/static/botframework-webchat/decorator.js",
        "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
        "botframework-webchat/internal": "/__dist__/packages/bundle/static/botframework-webchat/internal.js",
        "botframework-webchat-fluent-theme": "/__dist__/packages/fluent-theme/static/botframework-webchat-fluent-theme.js",
        "react": "https://esm.sh/react@18",
        "react-dom": "https://esm.sh/react-dom@18",
        "react-dom/": "https://esm.sh/react-dom@18/"
      }
    }
  </script>
  <script crossorigin="anonymous" src="/test-harness.js"></script>
  <script crossorigin="anonymous" src="/test-page-object.js"></script>
  <style type="text/css">
    #webchat {
      width: 640px;
    }

    .fui-FluentProvider {
      height: 100%;
    }

    .theme.variant-copilot-deprecated {
      --webchat__color--surface: var(--colorGrey98);
    }
  </style>
</head>

<body>
  <main id="webchat"></main>
  <script type="module">
    import '/test-harness.mjs';
    import '/test-page-object.mjs';

    import { createDarkTheme, webLightTheme } from '@fluentui/tokens';
    import { FluentProvider } from '@fluentui/react-provider';
    import { waitFor } from '@testduet/wait-for';
    import { createDirectLine, createStoreWithOptions, ReactWebChat } from 'botframework-webchat';
    import { FluentThemeProvider } from 'botframework-webchat-fluent-theme';
    import { createElement } from 'react';
    import { createRoot } from 'react-dom/client';

    const {
      testHelpers: { createDirectLineEmulator }
    } = window;

    // TODO: This is for `createDirectLineEmulator` only, should find ways to eliminate this line.
    window.WebChat = { createStoreWithOptions };

    run(async function () {
      const { directLine, store } = createDirectLineEmulator();

      const searchParams = new URLSearchParams(location.search);
      const variant = searchParams.get('variant');
      const theme = searchParams.get('fluent-theme');

      await host.windowSize(640, 1024, document.getElementById('webchat'));
      await host.sendDevToolsCommand('Emulation.setEmulatedMedia', {
        features: [
          { name: 'prefers-reduced-motion', value: 'reduce' },
          ...(theme === 'dark' || theme === 'light'
            ? [{ name: 'prefers-color-scheme', value: theme }]
            : [])
        ]
      });

      const root = createRoot(document.getElementById('webchat'));

      let fluentTheme;
      let codeBlockTheme;

      if (theme === 'dark' || window.matchMedia('(prefers-color-scheme: dark)').matches && theme !== 'light') {
        fluentTheme = {
          ...createDarkTheme({
            10: '#12174c',
            20: '#1a1f5b',
            30: '#21276a',
            40: '#293079',
            50: '#303788',
            60: '#384097',
            70: '#4049a7',
            80: '#151e80',
            90: '#4f59c5',
            100: '#5661d4',
            110: '#5e69e3',
            120: '#7982e8',
            130: '#949bec',
            140: '#afb5f1',
            150: '#c9cdf6',
            160: '#e4e6fa'
          }),
          colorNeutralBackground1Disabled: '#101010',
          colorNeutralBackground1Hover: '#101010',
          colorNeutralForeground5: '#424242',
          colorGrey98: '#1b1b1b'
        };
        codeBlockTheme = 'github-dark-default';
      } else {
        fluentTheme = {
          ...webLightTheme,
          colorNeutralForeground1: '#1b1b1b',
          colorGrey98: '#fafafa'
        };
        codeBlockTheme = 'github-light-default';
      }

      if (variant) {
        window.checkAccessibility = async () => { }
      }

      const webChatProps = { directLine, store, styleOptions: { codeBlockTheme } };

      root.render(
        variant ?
          createElement(
            FluentProvider,
            { className: 'fui-FluentProvider', theme: fluentTheme },
            createElement(
              FluentThemeProvider,
              { variant: variant },
              createElement(ReactWebChat, webChatProps)
            )
          ) :
          createElement(ReactWebChat, webChatProps)
      );

      await pageConditions.uiConnected();

      const botIcon = '';

      const author = {
        '@context': 'https://schema.org',
        '@type': 'Person',
        image: botIcon,
        name: 'Agent',
      };

      directLine.emulateIncomingActivity({
        from: { role: 'user' },
        type: 'message',
        text: `Message from user.`
      });

      directLine.emulateIncomingActivity({
        from: { role: 'bot', name: 'Bot' },
        type: 'message',
        text: '',
        id: 'msg-000',
        entities: [{
          '@id': '',
          '@context': 'https://schema.org',
          '@type': 'Message',
          type: 'https://schema.org/Message',
          abstract: 'Response without status',
          author
        }]
      });

      // Test Case 1: Single activity with different statuses
      // When: sending a message without status
      directLine.emulateIncomingActivity({
        from: { role: 'bot', name: 'Bot' },
        type: 'message',
        text: '',
        id: 'msg-001',
        entities: [{
          '@id': '',
          '@context': 'https://schema.org',
          '@type': 'Message',
          type: 'https://schema.org/Message',
          abstract: 'Another response without status',
          author
        }]
      });

      await pageConditions.numActivitiesShown(3);
      await host.snapshot('local');

      // When: updating to incomplete status (loading)
      directLine.emulateIncomingActivity({
        from: { role: 'bot', name: 'Bot' },
        type: 'message',
        text: '',
        id: 'msg-001',
        entities: [{
          '@id': '',
          '@context': 'https://schema.org',
          '@type': 'Message',
          type: 'https://schema.org/Message',
          abstract: 'Response in progress...',
          creativeWorkStatus: 'Incomplete',
          author
        }]
      });

      await pageConditions.numActivitiesShown(3);
      await host.snapshot('local');

      // When: updating to published status (complete)
      directLine.emulateIncomingActivity({
        from: { role: 'bot', name: 'Bot' },
        type: 'message',
        text: '',
        id: 'msg-001',
        entities: [{
          '@id': '',
          '@context': 'https://schema.org',
          '@type': 'Message',
          type: 'https://schema.org/Message',
          abstract: 'Response completed!',
          creativeWorkStatus: 'Published',
          author
        }]
      });

      await pageConditions.numActivitiesShown(3);
      await host.snapshot('local');

      // Test Case 2: Multiple activities with mixed statuses
      // When: adding multiple activities with different statuses
      directLine.emulateIncomingActivity({
        from: { role: 'bot', name: 'Bot' },
        type: 'message',
        text: '',
        id: 'msg-002',
        entities: [{
          '@id': '',
          '@context': 'https://schema.org',
          '@type': 'Message',
          type: 'https://schema.org/Message',
          abstract: 'Second message - published',
          creativeWorkStatus: 'Published',
          author
        }]
      });

      directLine.emulateIncomingActivity({
        from: { role: 'bot', name: 'Bot' },
        type: 'message',
        text: '',
        id: 'msg-003',
        entities: [{
          '@id': '',
          '@context': 'https://schema.org',
          '@type': 'Message',
          type: 'https://schema.org/Message',
          abstract: 'Third message - in progress',
          creativeWorkStatus: 'Incomplete',
          author
        }]
      });

      directLine.emulateIncomingActivity({
        from: { role: 'bot', name: 'Bot' },
        type: 'message',
        text: '',
        id: 'msg-004',
        entities: [{
          '@id': '',
          '@context': 'https://schema.org',
          '@type': 'Message',
          type: 'https://schema.org/Message',
          abstract: 'Fourth message - no status',
          creativeWorkStatus: 'Incomplete',
          author
        }]
      });

      await pageConditions.numActivitiesShown(6);
      await host.snapshot('local');

      // Test Case 3: Status transitions
      // When: changing status from incomplete to published
      directLine.emulateIncomingActivity({
        from: { role: 'bot', name: 'Bot' },
        type: 'message',
        text: '',
        id: 'msg-003',
        entities: [{
          '@id': '',
          '@context': 'https://schema.org',
          '@type': 'Message',
          type: 'https://schema.org/Message',
          abstract: 'Third message - now complete',
          creativeWorkStatus: 'Published',
          author
        }]
      });

      // When: adding status to previously statusless message
      directLine.emulateIncomingActivity({
        from: { role: 'bot', name: 'Bot' },
        type: 'message',
        text: '',
        id: 'msg-004',
        entities: [{
          '@id': '',
          '@context': 'https://schema.org',
          '@type': 'Message',
          type: 'https://schema.org/Message',
          abstract: 'Fourth message - now loading',
          creativeWorkStatus: 'Incomplete',
          author
        }]
      });

      await pageConditions.numActivitiesShown(6);
      await host.snapshot('local');

      // Test Case 4: Final completion
      // When: completing all remaining work
      directLine.emulateIncomingActivity({
        from: { role: 'bot', name: 'Bot' },
        type: 'message',
        text: '',
        id: 'msg-004',
        entities: [{
          '@id': '',
          '@context': 'https://schema.org',
          '@type': 'Message',
          type: 'https://schema.org/Message',
          abstract: 'Fourth message - final completion',
          creativeWorkStatus: 'Published',
          author
        }]
      });

      await pageConditions.numActivitiesShown(6);
      await host.snapshot('local');

      // Test Case 5: With text and status but no abstract
      // When: completing all remaining work
      directLine.emulateIncomingActivity({
        from: { role: 'bot', name: 'Bot' },
        type: 'message',
        text: 'Some text with published status',
        id: 'msg-005',
        entities: [{
          '@id': '',
          '@context': 'https://schema.org',
          '@type': 'Message',
          type: 'https://schema.org/Message',
          creativeWorkStatus: 'Published',
          author
        }]
      });

      await pageConditions.numActivitiesShown(7);
      await host.snapshot('local');
    });
  </script>
</body>

</html>
